<!--  -->
<template>
  <div class="fixmenu-wrap">
      <div class="fixmenu">
            <router-link
            v-for="(item,index) in this.menuObj"
            :key="index"
            :class=" {on:item.class==menuCur}"
            :to="'/'+item.class"
            >
            <i :class="item.class"></i>{{item.name}}
            </router-link>
      </div>
  </div>
</template>

<script>
export default {
    name:'FixMenu',
    data () {
        return {
            menuCur:'',
            menuObj:[
                {
                    class:'home',
                    name:'首页'
                },
                {
                    class:'sort',
                    name:'分类'
                },
                {
                    class:'sift',
                    name:'精选'
                },
                {
                    class:'my',
                    name:'我的'
                },
            ]
    };
  },

  components: {},

  computed: {},

  mounted() {
      this.menuCur = this.$route.name.toLowerCase();
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.fixmenu-wrap {
  height: 0.98rem;
  margin-top: 0.1rem;
}
.fixmenu {
  background: #fff;
  width: 7.5rem;
  height: 0.98rem;
  box-shadow: 0 -0.02rem 0.1rem rgba(55, 55, 55, 0.1);
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-left: -3.75rem;
  a {
    float: left;
    width: 25%;
    height: 0.98rem;
    text-align: center;
    font-size: 0.24rem;
    color: #838a96;
  }
  i {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    overflow: hidden;
    margin: 0 auto;
    background: url("~@/assets/images/ico-menu.png") no-repeat;
    background-size: 400% 200%;
  }
  .sort {
    background-position: 33.34% 0;
  }
  .sift {
    background-position: 66.67% 0;
  }
  .my {
    background-position: 100% 0;
  }
  .on {
    color: #333;
    .home {
      background-position: 0 100%;
    }
    .sort {
      background-position: 33.34% 100%;
    }
    .sift {
      background-position: 66.67% 100%;
    }
    .my {
      background-position: 100% 100%;
    }
  }
}

</style>